@include('Home.head')
<style>

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;

    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }


    .el-carousel__item img{
        width:100%;
        height:100%;
    }

    .clothes-div
    {
        overflow:hidden;
        display: inline-block;
        margin: 5px;
    }
    .am-btn.am-btn-default.specs
    {
        float: left;
        margin-right: 3%;
        width: 65px;
        height: 40px;
        border-radius: 5px;
        color: #fff;
        background: #919891;
        text-align: center;
        margin-top: 1%;
        margin-bottom: 1%;
        outline: none;
    }
	.hearbc{
		/* border-bottom:#EE4000 2px solid; */
		background-color: #FFFFFF;
		
	}
    .specs-p
    {
        margin-top: 5%;
    }
    .am-tab-panel img{
        width: 100%;
    }
	.am-tabs-d2 .am-tabs-nav>.am-active:after {
	    border-bottom-color: white;
	}
		.am-header-title a{
		font-size:17px;
	}
</style>
</head>
<body>
<div class="container" id="app">
    <header data-am-widget="header" class="am-header am-header-default my-header hearbc">
        <div class="am-header-left am-header-nav">
            <a href="javascript:history.back(-1);" class="" style="color: #000000;">
                <i class="am-header-icon am-icon-chevron-left"></i>
            </a>
        </div>
        <!-- <h1 class="am-header-title">
            <a href="#title-link" class="" style="color: rgb(255,215,0);">@{{ goods.goodsname }}</a>
        </h1> -->
    </header>
    <template>
        <div class="video" >
        <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls
        preload="none"
        width="100%" height="230" :poster="goods.pic" v-if="goods.video" autoplay>
        <source :src="goods.video" type='video/mp4'/>
        <source :src="goods.video" type='video/webm'/>
        <source :src="goods.video" type='video/ogg'/>
        </video>
        </div>
    </template>





    <div class="gray-panel">
{{--        <div class="paoduct-title-panel">--}}
{{--            <h1 class="product-h1">@{{ goods.case_name }}</h1>--}}
{{--            <p><span class="am-fr product-title-gray-text">--}}
{{--			<!-- <i class="am-icon-star"></i>收藏 -->--}}
{{--			</span>--}}
{{--        </div>--}}
        <!-- <div class="my-search-title-panel">
            <ul class="am-avg-sm-4 am-text-center am-text-sm">
                <li class="am-text-center">库存<br />@{{ goods.total }}件</li>
                <li class="am-text-center">销量<br />@{{ goods.sold }}件</li>
            </ul>
        </div> -->


		</div>
		

		

		
    <!-- 商品详情 -->
		<div data-am-widget="tabs" class="am-tabs am-tabs-d2">
		    <ul class="am-tabs-nav am-cf">
		        <li class="am-active" style="border: none;background-color: white;">
		            <a href="[data-tab-panel-0]">详情介绍</a>
		        </li>
		        <!-- <li class="">
		            <a href="[data-tab-panel-1]">交易记录</a>
		        </li> -->
		    </ul>
		    <div class="am-tabs-bd" style="border: none;">
		        <div data-tab-panel-0 class="am-tab-panel am-active" v-html="goods.detail"></div>
		        <div data-tab-panel-1 class="am-tab-panel ">
		
		            <ul class="am-list am-list-static am-list-border am-list-striped am-text-sm">
		                <li v-for="val in orderData" v-if="orderData.length">@{{ val.name }}于@{{ val.createtime }}日购买成功</li>
		                <li v-if="orderData.length == 0">暂无交易记录</li>
		            </ul>
		
		        </div>
		    </div>
		</div> 
		   @include('Home.foot')
    </div>
</body>
<script type="text/javascript">
    function checkedSpecs(e)
    {
        var checkSpecs = $("#specs-btnss"+e).attr( "checkSpecs" );
        if ( checkSpecs == 1 ) {
            $("#specs-btnss"+e).attr( "checkSpecs", 2 );
            $("#specs-btnss"+e).css("background","#919891");
        } else {
            $("#specs-btnss"+e).attr( "checkSpecs", 1 );
            $("#specs-btnss"+e).css("background","#5bb95b");
            $("#specs-btnss"+e).parent('.clothes-div').siblings('').find('button').attr( "checkSpecs", 2 );
            $("#specs-btnss"+e).parent('.clothes-div').siblings('').find('button').css("background","#919891");
        }
    }
</script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            hostUrl:"http://www.baoli.com",
            goods:[],
            goodsImgName:[],
            number:1,
            MicroLeve:[],//商城等级
            user:[],//会员
            orderData:[],//交易记录
            //商品规格名
            specsList :{},
            //商品规格名--值
            specsLists:{},
            specsExist:0,
			buy_num:'',
			userinfo:[],
			group_id:'',
			userid:'',
			buy_name:'',
			type:'',
            video:'',
            boodId:'' //文章id
        },
        //事件
        methods: {

            //初始化 系统管理员列表
            initialize:function () {
                var id = this.obtain('id');
                if(id > 0){
                    //获取商品数据
                    $.post("/home/index/getCaseDetail",{'_token':'{{csrf_token()}}',class:'find',id:id},function (res) {
                        if(res.code == 1){
                            app.goods = res.data;
                            app.boodId = res.data.id;
                            app.specsList = res.GoodsSpecsName;
                            app.specsLists = res.GoodsSpecsVal;
							app.buy_num =res.count;
							app.group_id = res.group_id;
                            if ( app.specsList.length != 0 ) {
                                $("#clothes_type").show();
                                app.specsExist = 1;
                            }
                            app.number = app.goods.purchase_num;
                            app.goodsImgName = res.data.goodsImgName;
                            app.user = res.data.user;
                            app.orderData = res.orderData;
                            app.MicroLeve = res.data.MicroLeve;
                        } else {
                            layer.msg(res.data);
                        }
                    });
                } else {
                    window.location.href="/home/error";
                }

            },
            numberAdd:function () { //加
                if( app.number > app.goods.total || app.number == '') {
                    layer.msg('数量不对');return;
                }
                app.number += 1;
            },
            numberMinus:function () { //减
                if(app.number <= app.goods.purchase_num || app.number == '') {
                    layer.msg('最少一件');return;
                }
                app.number -= 1;
            },
            //生成订单
			
			
			//参与人数
			add2:function(){
				var specs = '';
				window.location.href="/home/login/registerView?goodid=" + app.goods.id +"&specs=" + specs +"&type=" + app.goods.type;
			},
            add:function (id,group_id) {
               /*if ( id == undefined ) {
                    layer.msg("此产品正在升级中,请耐心等待,谢谢!");
                    return false;
                }*/
				var id1 = this.obtain('id');
				var gotype = '';
                var specs = '';
                var specsCheckData = [];
                if ( app.specsExist == 1 ) {
                    $(".specs-p").siblings('div').find("button").each(function(){
                        if ( $(this).attr("checkSpecs") == 1 ) {
                            specsCheckData.push( $(this).attr("checkSpecs") );
                        }
                    });
                    if ( app.specsList.length != specsCheckData.length ) {
                        layer.msg('请完整选择产品规格!');return false;
                    }
                    $(".clothes-div button").each(function(){
                        if ( $(this).attr("checkSpecs") == 1 ) {
                            var specsName = $(this).parents('.first-each-div').children('p').html();
                            var specsVal = $(this).html();
                            specs = specs+specsName+':'+specsVal+';';
                        }
                    });
                    if ( specs == '' ) {
                        layer.msg('请选择产品规格');return false;
                    }
                }
                app.number = parseInt(app.number);
                if(app.number < app.goods.purchase_num || app.number > app.goods.total || app.number == ''){
                    layer.msg('请输入正确的数量');
                    return;
                }
                layer.load(2);
                $.post("/home/microShop/microorder",{
                    '_token':'{{csrf_token()}}',
                    class:'add',
                    type:0,
                    specsExist:app.specsExist,
                    specslength:app.specsList.length,
                    Checklength:specsCheckData.length,
					group_id:group_id,
					gotype : 1,
                    goods:[
                        {
                            goodsid:id,
                            number:app.number,
                            specs:specs,
                            id:''
                        }
                    ]
                },function (res) {
                    layer.closeAll('loading');
                    if(res.code == 1){
                        layer.msg(res.data.data);
                        window.location.href="/home/orderpage?id="+res.data.id+"&gotype="+1+"&id1="+id1;
                    } else if(res.code == 0) {
                        layer.msg(res.data);
						window.location.href="/home/microShop/productmicro?id="+id1;
                    }
                });
            },
			
			
			add1:function (goodsid,group_id,userid) {
			   /*if ( id == undefined ) {
			        layer.msg("此产品正在升级中,请耐心等待,谢谢!");
			        return false;
			    }*/
				var id1 = this.obtain('id');
				var gotype = '';
			    var specs = '';
			    var specsCheckData = [];
			    if ( app.specsExist == 1 ) {
			        $(".specs-p").siblings('div').find("button").each(function(){
			            if ( $(this).attr("checkSpecs") == 1 ) {
			                specsCheckData.push( $(this).attr("checkSpecs") );
			            }
			        });
			        if ( app.specsList.length != specsCheckData.length ) {
			            layer.msg('请完整选择产品规格!');return false;
			        }
			        $(".clothes-div button").each(function(){
			            if ( $(this).attr("checkSpecs") == 1 ) {
			                var specsName = $(this).parents('.first-each-div').children('p').html();
			                var specsVal = $(this).html();
			                specs = specs+specsName+':'+specsVal+';';
			            }
			        });
			        if ( specs == '' ) {
			            layer.msg('请选择产品规格');return false;
			        }
			    }
			    app.number = parseInt(app.number);
			    if(app.number < app.goods.purchase_num || app.number > app.goods.total || app.number == ''){
			        layer.msg('请输入正确的数量');
			        return;
			    }
			    layer.load(2);
			    $.post("/home/microShop/microorder",{
			        '_token':'{{csrf_token()}}',
			        class:'add',
			        type:0,
			        specsExist:app.specsExist,
			        specslength:app.specsList.length,
			        Checklength:specsCheckData.length,
					group_id:group_id,
					gotype : 2,
					id:userid,
			        goods:[
			            {
			                goodsid:goodsid,
			                number:app.number,
			                specs:specs,
			                id:''
			            }
			        ]
			    },function (res) {
			        layer.closeAll('loading');
			        if(res.code == 1){
			            layer.msg(res.data.data);
			            window.location.href="/home/orderpage?id="+res.data.id+"&bid="+userid+"&gotype="+2+"&id1="+id1;
			        } else if(res.code == 0) {
			            layer.msg(res.data);
						window.location.href="/home/microShop/productmicro?id="+id1;
			        }
			    });
			},
			
            car:function (id) {
                console.log(id)
                /* if ( id == undefined ) {
                    layer.msg("此产品正在升级中,请耐心等待,谢谢!");
                    return false;
                }*/

                var specs = '';
                var specsCheckData = [];
                if ( app.specsExist == 1 ) {
                    $(".specs-p").siblings('div').find("button").each(function(){
                        if ( $(this).attr("checkSpecs") == 1 ) {
                            specsCheckData.push( $(this).attr("checkSpecs") );
                        }
                    });
                    if ( app.specsList.length != specsCheckData.length ) {
                        layer.msg('请完整选择产品规格!');return false;
                    }
                    $(".clothes-div button").each(function(){
                        if ( $(this).attr("checkSpecs") == 1 ) {
                            var specsName = $(this).parents('.first-each-div').children('p').html();
                            var specsVal = $(this).html();
                            specs = specs+specsName+':'+specsVal+';';
                        }
                    });
                    if ( specs == '' ) {
                        layer.msg('请选择产品规格');return false;
                    }
                }
                if(app.number < app.goods.purchase_num || app.number > app.goods.total || app.number == '' || isNaN(parseInt(app.number))){
                    layer.msg('请输入正确的数量');
                    return;
                }
                $.post("/home/microShop/car", {
                    '_token': '{{csrf_token()}}',
                    class:'add',
                    goodsid:id,
                    number:app.number,
                    specs:specs,
                    specsExist:app.specsExist,
                    specslength:app.specsList.length,
                    Checklength:specsCheckData.length
                }, function (res) {
                    if (res.code) {
                        layer.msg(res.data);
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
			
			pin:function(group_id){
			var id = this.obtain('id');
			var specs = '';
			var specsCheckData = [];
			if ( app.specsExist == 1 ) {
			    $(".specs-p").siblings('div').find("button").each(function(){
			        if ( $(this).attr("checkSpecs") == 1 ) {
			            specsCheckData.push( $(this).attr("checkSpecs") );
			        }
			    });
			    if ( app.specsList.length != specsCheckData.length ) {
			        layer.msg('请完整选择产品规格!');return false;
			    }
			    $(".clothes-div button").each(function(){
			        if ( $(this).attr("checkSpecs") == 1 ) {
			            var specsName = $(this).parents('.first-each-div').children('p').html();
			            var specsVal = $(this).html();
			            specs = specs+specsName+':'+specsVal+';';
			        }
			    });
			    if ( specs == '' ) {
			        layer.msg('请选择产品规格');return false;
			    }
			}
			$.post("/home/straightShop/goods", {'_token': '{{csrf_token()}}',class:'group_list',
			group_id:group_id,
			goods:[
			    {
			        goodsid:id,
			        number:app.number,
			        specs:specs,
			        id:''
			    }
			]
			}, function (res) {
					 if(res.code == 1){
						 app.userinfo = res.data;
					 }else if(res.code == 0){
						 layer.msg(res.data)
						 window.location.href="/home/microShop/productmicro?id="+id;
					 }
				});
			},
			
            //获取url id
            obtain:function (val) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == val){
                        return pair[1];
                    }
                }
            },
            getRead:function () {
                //layer.msg('已获取积分');
                $.post("/home/microShop/readUser",{
			        '_token':'{{csrf_token()}}',
                    boodId:app.boodId

			    },function (res) {
			        if(res.code == 1){
                        layer.msg(res.data);
                    }else {
                        layer.msg(res.data);
                    }
			    });
            },
        },
        //自动执行
        mounted: function () {
            this.initialize();
            setTimeout(() => {
                this.getRead();
            }, 30000);   //时间长度
        },
    });
</script>
</html>
